<template>
  <div class="container">
    <el-dialog
      title="文章预览"
      :visible.sync="previewVisible"
      width="50%"
      :before-close="previewClose"
    >
      <div>
        <h2>
          {{ details.title }}
        </h2>
      </div>
      <div>
        <span>{{ details.createTime | dataFormat }}</span>
        <span>{{ userName }}</span>
        <span>
          <i class="el-icon-view"></i>
          {{ details.visits }}
        </span>
      </div>
      <div v-html="details.articleBody" class="bodycolor"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    previewVisible: { type: Boolean, required: true },
    details: { type: Object, required: true },
    userName: { type: String, required: true }
  },
  methods: {
    previewClose() {
      this.$emit("previewclose");
    }
  }
};
</script>

<style scoped lang="less">
.bodycolor {
  background-color: #eeeeee;
  border-top: 1px dotted black;
}
span {
  margin-right: 10px;
}
</style>
